// ------------1.获取学生数据，并渲染到表格中---------------
async function renderStudent(){
    const {data:res} = await axios.get('/students')
    // console.log(res);
    let arr = res.data.map (item => {
        return `
            <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender === 0? '男':'女'}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province} ${item.city} ${item.area}</td>
                <td>
                <a href="javascript:;" class="text-success mr-3"><i  data-id="${item.id}" class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i  data-id="${item.id}" class="bi bi-trash"></i></a>
                </td>
            </tr>
        `
    })
    document.querySelector('tbody').innerHTML =  arr.join('')
}
renderStudent()


// -------------2.添加操作，需要提前准备，比如模态框，省市县联动效果---
// bootstrap模态框使用方法 两个步骤：1.实例化 2.调用方法显示/隐藏
// let addModal = new bootstrap.Modal(模态盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show()//让模态框显示
// addModal.hide()//让模态框隐藏

// 点击+按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click',function(){
    // 修改模态框的标题
    document.querySelector('#modal h5').innerHTML = '添加学员'
    document.querySelector('form').reset()
    addModal.show()
})

// 完成省市县的联动效果
async function initCity(){
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')
    // 1.页面刷新，马上获取全部的省，渲染到第一个下拉框的位置
    const {data:res} = await axios.get('/api/province')
    // console.log(res);
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')

    // 2.切换省的时候，获取对应的市，渲染到第二个下拉框的位置
    
    province.addEventListener('change',async function(){
        // 无论选择的是哪个省，一定要重置县（地区）
        area.innerHTML = '<option value="">--地区--</option>';
        let pname = province.value;
        if (pname === '') {
            return ( city.innerHTML = '<option value="">--城市--</option>')
        }
        const {data:res} = await axios.get('/api/city',{params:{pname}})
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')

    })
    // 3.切换市的时候，获取对应的县，渲染到第三个下拉框的位置
    city.addEventListener('change',async function(){
        let pname = province.value;
        let cname = city.value;
        if (cname === '') {
            return (area.innerHTML = '<option value="">--地区--</option>')
        }
        const {data:res} = await axios.get('/api/area',{params:{pname,cname}})
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr.join('')

    })
}
initCity()

// 点击弹层中的 确认 按钮得时候
document.querySelector('#submit').addEventListener('click',async function(e){
    e.preventDefault();
    let data = val(document.querySelector('#form'))
    // console.log(data);
    // 把数字型的值转换一下
    data.age = Number(data.age)
    data.gender = +data.gender//注意+必须和后面的变量连在一起
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    // console.log(data);

    // 判断 是添加还是修改操作
    let title = document.querySelector('#modal h5').innerHTML
    if(title === '添加学员') {
        // ajax提交
        try {
            const {data:res} = await axios.post('/students',data)
                // 使用插件提示
                message.success(res.message)
                // 重新获取页面数据，重新渲染
                renderStudent()
                // 隐藏模态框
                addModal.hide()
            } catch (e) {
                message.error('添加失败')
        }  
    } else if (title === '修改学员') {
        try {
            let id = document.querySelector('#modal h5').dataset.id;
            const {data:res} = await axios.put(`/students/${id}`,data)
                // 使用插件提示
                message.success(res.message)
                // 重新获取页面数据，重新渲染
                renderStudent()
                // 隐藏模态框
                addModal.hide()
            } catch (e) {
                message.error('修改失败')
        }  
    }    
})


// -----------删除操作|编辑操作--------------
// 事件委托
document.querySelector('tbody').addEventListener('click',async function(e){
    // 判断：点击的是否是删除
    if (e.target.classList.contains('bi-trash')){
        let id = e.target.dataset.id
        // console.log('你点击的是删除');
        // 删除是敏感操作，必须加提示
        if (!confirm('确定要删除吗')) return
        try {
            const {data:res} = await axios.delete(`/students/${id}`);
            message.success('删除成功')
            renderStudent()
        } catch (e) {
            message.error('删除失败')
        } 
        /*
        message.confirm('提示','你确定不要我了吗？',async (res) => {
            if (res) {
                try {
                    const {data:res} = await axios.delete(`/students/${id}`);
                    message.success('删除成功')
                    renderStudent()
                } catch (e) {
                    message.error('删除失败')
                } 
            }
        })
        */ 
    }
     // 判断：点击的是否是编辑
    if (e.target.classList.contains('bi-pen')){
        let id = e.target.dataset.id
        // console.log('你点击的是编辑',id);

        // 修改模态框的标题
        document.querySelector('#modal h5').innerHTML = '修改学员'
        document.querySelector('#modal h5').setAttribute('data-id',id)


        // 点击编辑的时候显示模态框
        addModal.show();
        // 要做数据回填 -->首先的有数据 -->根据id发送请求获取数据
        const {data:res} = await axios.get(`/students/${id}`)
        // console.log(res);
        // 在数据回填之前，应该把市，县都取出来，渲染到第2，3个下拉框中
        let p1 = axios.get('/api/city',{params:{pname:res.data.province}})
        let p2 = axios.get('/api/area',{params:{pname:res.data.province,cname:res.data.city}})
        
        // 解构赋值
        // const [{data:{data:c}},{data:{data:a}}] = await Promise.all([p1,p2])
        // console.log(c);
        // console.log(a);

        const result =await Promise.all([p1,p2])
        // console.log(result);
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = `<option value="">--城市--</option>` + arr2.join('')
        // console.log(result[1].data.data);
        let arr3 = result[1].data.data.map(item =>  `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = `<option value="">--地区--</option>` + arr3.join('')
        // val(表单，数据) //传递两个参数，表示进行数据回填
        val(document.querySelector('#form'),res.data)
        
    }
})




